<template>
	<div class="st-input"
			 :class="{ 'st-input_suffix': showSuffix }">
		<input :type="showPassword ? (passwordVisible ? 'text' : 'password') : 'type'"
					 class="st-input_inner"
					 :class="{'is-disabled': disabled}"
					 :placeholder="placeholder"
					 :name="name"
					 :disabled="disabled"
					 :value="value"
					 @input="handleInput">
		<span class="st-input_suffix">
			<i class="on-input_icon st-icon-close"
				 v-if="clearable && value"
				 @click="clear"></i>
			<i class="on-input_icon st-icon-squarecheckfill"
				 v-if="showPassword && value"
				 @click="handlePassword"></i>
		</span>
	</div>
</template>

<script>
export default {
	name: 'StInput',
	data() {
		return {
			passwordVisible: false
		}
	},
	props: {
		placeholder: {
			type: String,
			default: ''
		},
		type: {
			type: String,
			default: 'text'
		},
		name: {
			type: String,
			default: ''
		},
		disabled: {
			type: Boolean,
			default: false
		},
		value: {
			type: String,
			default: ''
		},
		clearable: {
			type: Boolean,
			default: false
		},
		showPassword: {
			type: Boolean,
			default: false
		}
	},
	methods: {
		handleInput(e) {
			this.$emit('input', e.target.value)
		},
		clear() {
			this.$emit('input', '')
		},
		handlePassword() {
			this.passwordVisible = !this.passwordVisible
		}
	},
	computed: {
		showSuffix() {
			return this.clearable || this.showPassword
		}
	}
}
</script>

<style scoped lang="scss">
.st-input {
	width: 100%;
	position: relative;
	font-size: 14px;
	display: inline-block;

	.st-input_inner {
		-webkit-appearance: none;
		background-color: #fff;
		background-image: none;
		border: 1px solid #dcdfe6;
		border-radius: 4px;
		box-sizing: border-box;
		color: #606266;
		display: inline-block;
		font-size: inherit;
		height: 40px;
		line-height: 40px;
		outline: none;
		padding: 0 15px;
		transition: border-color 0.2s cubic-bezier(0.645, 045, 0.355, 1);
		width: 100%;

		&:focus {
			outline: none;
			border-color: #409eff;
		}

		// input禁用样式
		&.is-disabled {
			background-color: #f5f7fa;
			border-color: #e4e7ed;
			color: #c0c4cc;
			cursor: not-allowed;
		}
	}
}

.st-input_suffix {
	.st-input_inner {
		padding-right: 30px;
	}

	.st-input_suffix {
		position: absolute;
		right: 10px;
		height: 100%;
		top: 0;
		line-height: 40px;
		text-align: center;
		color: #c0c4cc;
		transition: all 0.3s;
		z-index: 900;

		i {
			color: #c0c4cc;
			font-size: 14px;
			cursor: pointer;
			transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
		}
	}
}
</style>
